<template>
  <!--生成的列表的 meta-->
  <el-row :gutter="20">
    <el-col :span="6">
      表单列数：
      <el-slider
        v-model="formMeta.formMeta.columnsNumber"
        :min="1"
        :max="6"
      ></el-slider><br>
      <!--
      表单类型：
      <el-radio-group v-model="formKind" size="small">
        <el-radio-button label="form" />
        <el-radio-button label="card"/>
        <el-radio-button label="tab" />
        <el-radio-button label="step" />
      </el-radio-group>-->
      <el-input
        v-model="json2"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-col>
    <el-col :span="18">
     <nf-form
        v-form-drag="formMeta"
        :model="model"
        :partModel="model2"
        v-bind="formMeta"
      ></nf-form>
      <!--
      <component
        :is="formDic[formKind]"
        :model="model"
        :partModel="model2"
        v-bind="formMeta"
      >
      </component>-->
     
    </el-col>
    <el-col :span="6">
      <div
        v-for="(item, key, index) in model"
        :key="index"
      >
        {{key}}：{{item}}
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed, ref, watch } from 'vue'
  import {
    // getMetaDataState,
    toMetaForm
  } from '../../../../lib-excel/main'

  const formDic = {
    form: 'nf-form',
    card: 'nf-form-card',
    step: 'nf-form-step',
    tab: 'nf-form-tab',
  }

  const setFormKind = (formKind, formMeta) => {
    watch(formKind, () => {
      switch(formKind.valule) {
        case 'card':
          formMeta.subMeta.type = 'card'
          formMeta.subMeta.cols.length = 0
          formMeta.subMeta.cols.push({
            title: "分组一",
            colIds: [ 
              formMeta.colOrder[0],
              formMeta.colOrder[1]
            ]
          })
          break
      }
    })
  }

  /**
   * 字段 meta
   */
  export default defineComponent({
    name: 'nf-xls-meta-col',
    props: {
    },
    setup(props, context) {

      const model = reactive({})
      const model2 = reactive({})

      const formKind = ref('form')
      // 获取表单和字段的meta
      const {
        formMeta,
        colMeta
      } = toMetaForm(model)

      const json2 = computed(() => JSON.stringify(formMeta, null, 2))
      
      setFormKind(formKind, formMeta)

      return {
        formKind,
        formDic,
        model,
        model2,
        formMeta,
        colMeta,
        json2
      }
    }
  })
</script>